<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>选择今天徐梓潇的晚餐：</h1>
    凉拌黄瓜
    <input type="checkbox">
    黄瓜皮蛋
    <input type="checkbox">
    炒黄瓜
    <input type="checkbox">
    炖黄瓜
    <input type="checkbox">
    闷黄瓜
    <input type="checkbox">
    油炸黄瓜皮
    <input type="checkbox">
    黄瓜籽煸鱼子
    <input type="checkbox">

    <div id="buttonGroup">
        <input type="button" value="全选">
        <input type="button" value="反选">
        <input type="button" value="全不选">
    </div>

    <script>
        let checkbox = document.querySelectorAll('[type="checkbox"]');

        buttonGroup.onclick = function (event) {
            switch (event.target.value) {
                case '全选':
                    for (let item of checkbox) {
                        item.checked = true;
                    }
                    break;
                case '反选':
                    for (let item of checkbox) {
                        // if (item.checked) {
                        //     item.checked = false;
                        // } else {
                        //     item.checked = true;
                        // }
                        item.checked = item.checked ? false : true;
                    }
                    break;
                case '全不选':
                    for (let item of checkbox) {
                        item.checked = false;
                    }
                    break;
            }
        }
    </script>
</body>

</html>